@include('Home.head')
<style>

	.van-sidebar-item--select{
		color:#2B8DFF !important;
		border-color: #2B8DFF !important;
	}
	.van-sidebar-item{
		font-size: 16px;
	}
	.van-tree-select__nav-item {
		padding: 17px 0px 17px 0px !important;
		text-align: center !important;
	}
	.van-sidebar-item__text{
		margin-top: 10px;
	}
	.img_div_zt{
		/* position: absolute; */
		z-index: 999;
		top: 0;
		width: -webkit-fill-available;
		height: auto;
		margin: 0px 0 0 107px;
		background: white;
	}
	.banner {
		height: 15rem;
		width: 100%;
		overflow: hidden;
		padding: 1.2rem;
		padding-top: 0;
		background: #f7f8fa;
	}
	.img_zt{
		float: left;
		width:40%;
		height: 70px;
		border-radius: 6px;
	}
	.van-tree-select{
		width:107px;
		position: absolute;
	}
	.van-tree-select__content{
		-webkit-box-flex: 0;
		flex: 0;
	}
	.img_div{
		display: inline-block;
		margin: 5px 0px;
		text-align: center;
		width: 100%;
		height: 90px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.name_goods{
		font-size:15px;
		font-weight:500;
		line-height:20px;
		color:rgba(51,51,51,1);
		opacity:1;
	}
	.am-navbar{
		opacity: 0.9  !important;
	}
	.van-search__content--round{
		background-color: #FFF;
		border-radius: 999px;
	}
	.van-image__img{
		border-radius: 1rem;
	}
	.am-header-title a{
		font-size:17px;
	}
</style>
<body>
<div class="container" id="app">
	<header data-am-widget="header" class="am-header am-header-default" style="border-bottom:#F2F2F2 2px solid;background-color: #409eff;">
		<div class="am-header-left am-header-nav">
			<a  onclick="javascript:history.back(-1);" class="">
				<i class="am-header-icon am-icon-chevron-left"></i>
			</a>
		</div>
		<h1 class="am-header-title">
			<a href="#title-link" class="" style="color: white;font-weight: 600;">公司介绍</a>
		</h1>
	</header>

	<div style="margin: 10px;">
		<el-input v-model="keyword"  placeholder="请输入搜索关键字">
			<el-button slot="append" icon="am-icon-search" v-on:click="search()"></el-button>
		</el-input>
	</div>

	<div>
		<van-tree-select
				height="auto"
				:items="items"
				:main-active-index.sync="active"
				@click-nav="onNavClick"
				style="padding-bottom: 150px;"
		>

		</van-tree-select>
		<div class="img_div_zt" v-if="sortDatas==''" style="text-align: center;
		color: #c5c4c4;
		padding-top: 100px;">暂无商品</div>
		<div class="img_div_zt " v-if="sortDatas!=''"  >
			<div  class="img_div"  v-for="index,i in sortDatas" :key="i" @click="cksp(index.id)">
				<img @click="cksp(index.id)" class="img_zt" style="height: 85px;" :src="index.pic" alt="">
				<span class="name_goods">@{{index.case_name}}</span><br>
				{{--				<img style="width: 46px;height: 22px;margin-top: 20px;" src="http://qiniu.baoliy168.com/59c3be507165d708cea6df5aaa5221fb.png" />--}}
				<!-- <span style="color: orange;font-weight: 400;">免费</span> -->
			</div>
		</div>
	</div>

	<footer data-am-widget="navbar" class="am-navbar am-cf sxy-footer" id="" style="background-color: white;">
		<ul class="am-navbar-nav am-cf am-avg-sm-4">
			<li>
				<a href="/home/excellent/index" class="footer-active">
					<img src="http://qiniu.baoliy168.com/%E7%BB%84%203478%403x.png" alt="首页"/>
					<span class="am-navbar-label">首页</span>
				</a>
			</li>
			<li>
				<a href="/home/agentBonus/index" class="">
					<img src="http://qiniu.baoliy168.com/%E7%BB%84%203477%403x.png" alt="分类" />
					<span class="am-navbar-label">分类</span>
				</a>
			</li>
			<li>
				<a href="/home/member/shopcart" class="">
					<img src="http://qiniu.baoliy168.com/%E7%BB%84%203474%403x.png" alt="分享"/>
					<span class="am-navbar-label">购物车</span>
				</a>
			</li>
			<li>
				<a href="/home/member/index" class="">
					<img src="http://qiniu.baoliy168.com/%E7%BB%84%203475%403x.png" alt="我的"/>
					<span class="am-navbar-label">我的</span>
				</a>
			</li>
		</ul>
	</footer>
</div>
</body>
<script src="{{ URL::asset('js/vant.min.js') }}"></script>
{{--<link rel="stylesheet" href="{{ URL::asset('css/vant.min.css') }}"/>--}}
<script>
	var app = new Vue({
		el: "#app",
		data: {
			title: '我的资料',
			db: '',
			items: [],
			sortData: {},
			active: 0,
			total: '',
			sortDatas:'',
			keyword:'',
		},
		methods: {
			search:function(){
				//获取商品数据

				$.post("/home/index/search_result",{'_token':'{{csrf_token()}}',class:'select',keyword:app.keyword},function (res) {

					if(res.code == 1){
						app.sortDatas = res.data

						if (res.data.length > 3) {
							for (var i = 0; i < 3; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}else{
							for (var i = 0; i < res.data.length; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}

					} else {

						layer.msg(res.data,{icon:7});

					}

				});

			},
			cksp(id){
				window.location.href = "/home/index/case_detail?id="+ id
			},
			onNavClick(index) {
				this.active=index
				this.id=this.sortData[index].id
				$.get("/home/index/get_case",{id:this.id},res=>{
					if(res.code==1){
						this.sortDatas=res.data
					}else{
						this.sortDatas=''
					}
					// console.log(this.sortDatas)
				})

			},
			//初始化 系统管理员列表
			initialize: function () {
				var _this = this
				$.post("/home/index/case_classify",{'_token':'{{csrf_token()}}',class:'select'},function (res) {

					if(res.code == 1){
						_this.sortData = res.data
						for (var i = 0; i < _this.sortData.length; i++) {
							var obj = {};
							obj.text = _this.sortData[i].name;
							_this.items.push(obj);
						}
					} else if(res.code == 0) {
					}
				});
				$.post("/home/index/get_case",{'_token':'{{csrf_token()}}',class:'select',id:19},function (res) {

					if(res.code == 1){
						_this.sortDatas = res.data
					} else if(res.code == 0) {
					}
				});
			},
			getDetails: function (id) {
				// window.location.href = "/shop/member/user/transactionDetails?type="+type+"&id="+id;
				window.location.href = "/home/agentBonus/bonusDetail?id=" + id;
			},
			obtain: function (val) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == val) {
						return pair[1];
					}
				}
			}
		},
		//自动执行
		mounted: function () {
			this.initialize();
		},
	})
</script>
</html>
